import React from "react";
import { BrowserRouter, NavLink, Route, Switch } from "react-router-dom";

const Index = () => {
  return (
    <BrowserRouter>
      {/* 导航 */}
      <NavLink to="/home">首页</NavLink>
      <NavLink to="/news">新闻</NavLink>
      {/* 线路:switch从上而下匹配只要找到匹配项就立即渲染，剩下的Route将不再进行匹配了[*]在Switch里匹配 原理依然是贪婪模式，即找到一个之后剩下的依然不在匹配
      [在Switch里对包含类型的基础线路上一定要加exact不然则只会永远的实现基础线路里的组件] */}
      <Switch>
        <Route path="/" exact component={() => <div>我是123</div>} />
        <Route path="/home" component={() => <div>我是首页</div>} />
        <Route path="/news" component={() => <div>我是新闻</div>} />
        {/* <Route path="/" component={() => <div>我是123</div>} /> */}

      </Switch>
    </BrowserRouter>
  );
};

export default Index;
